<template>
	<view class="presell">
		<index-header color="#602d29" title="产品预售"></index-header>
		<view class="presell-bg">
			<image src="../../../static/bg/presell-bg.jpg" mode=""></image>
		</view>
		<view class="hr">
			<van-divider
			 contentPosition="center"
			 customStyle="color: #808080; border-color: #999; font-size: 18px;">
				<view class="info">
					<view class="avatarlist">
						<image src="../../../static/uploadfiles/avatar1.jpeg" mode=""></image>
						<image src="../../../static/uploadfiles/avatar2.jpeg" mode=""></image>
						<image src="../../../static/uploadfiles/avatar3.jpeg" mode=""></image>
					</view>
					<text class="text">361人参与</text>
				</view>
		 </van-divider>
		</view>
		<navigator url="../detail/detail">
			<view class="item-card">
				<view class="item-card-image">
					<image src="../../../static/uploadfiles/shaobing.jpg" mode=""></image>
				</view>
				<view class="item-card-info">
					<view class="item-card-title">
						黄山烧饼
					</view>
					<view class="item-card-des">
						美味梅菜扣肉烘烤烧饼黄山原产
					</view>
					<view class="item-card-price">
						<view class="price">
							<view class="price-origin">
								￥38
							</view>
							<view class="price-now">
								<text>￥</text><text>26</text>
							</view>
						</view>
						<view class="button">
							<text>2人预购</text>
							<text>预购</text>
						</view>
					</view>
				</view>
			</view>
		</navigator>
		<view class="item-card">
			<view class="item-card-image">
				<image src="../../../static/uploadfiles/shaobing.jpg" mode=""></image>
			</view>
			<view class="item-card-info">
				<view class="item-card-title">
					黄山烧饼
				</view>
				<view class="item-card-des">
					美味梅菜扣肉烘烤烧饼黄山原产
				</view>
				<view class="item-card-price">
					<view class="price">
						<view class="price-origin">
							￥38
						</view>
						<view class="price-now">
							<text>￥</text><text>26</text>
						</view>
					</view>
					<view class="button">
						<text>2人预购</text>
						<text>预购</text>
					</view>
				</view>
			</view>
		</view>
		<view class="presell-footer">
			<view class="hr">
				<view class="greenline">
				</view>
			</view>
			<view class="text">
				美好如期而至
			</view>
			<view class="hr">
				<view class="greenline">
				</view>
			</view>
		</view>
		<view class="presell-fakefooter"></view>
	</view>
</template>

<script>
	import indexHeader from '../../../components/indexHeader.vue'
	import cartBar from '../../../components/cartBar.vue'
	export default {
		components: {
			indexHeader,
			cartBar
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.presell {
	background-color: #e5e5e5;
	&-bg {
		width: 750rpx;
		height: 750rpx;
		&>image {
			width: 100%;
			height: 100%;
		}
	}
	.hr {
		width: 500rpx;
		height: 50rpx;
		margin: 20rpx auto;
		.info {
			width: 180rpx;
			height: 50rpx;
			display: flex;
			.avatarlist {
				width: 80rpx;
				display: flex;
				&>image {
					display: block;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					margin-left: -10rpx;
					margin-top: 5rpx;
				}
				&>image:first-child {
					margin-left: 0;
				}
			}
			.text {
				font-size: 20rpx;
			}
		}
	}
	&-footer {
		width: 100%;
		height: 50rpx;
		margin-top: 150rpx;
		display: flex;
		justify-content: center;
		.hr {
			width: 150rpx;
			height: 50rpx;
			.greenline {
				width: 100%;
				height: 1px;
				margin-top: 22rpx;
				background-color: rgba(1,40,22,.47);
			}
		}
		.hr:first-child {
			margin-right: 40rpx;
		}
		.hr:last-child {
			margin-left: 40rpx;
		}
		.text {
			height: 50rpx;
			color: #83998f;
			font-size: 30rpx;
		}
	}
	&-fakefooter {
		width: 100%;
		height: 150rpx;
	}
}
.item-card {
	width: 720rpx;
	margin: 20rpx auto;
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	border-radius: 40rpx;
	padding: 20rpx 0;
	&-image {
		width: 160rpx;
		height: 160rpx;
		overflow: hidden;
		border-radius: 40rpx;
		margin: 0 20rpx;
		&>image {
			width: 100%;
		}
	}
	&-info {
		max-width: 460rpx;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
	&-title {
		font-size: 34rpx;
		color:#505050;
		font-weight: bold;
	}
	&-des {
		font-size: 26rpx;
		color: #505050;
	}
	&-price {
		display: flex;
		justify-content: space-between;
		.price {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			&-origin {
				color: #808080;
				font-size: 26rpx;
				text-decoration: line-through;
			}
			&-now {
				color: #1f8f5d;
				font-size: 20rpx;
				&>text:last-child {
					font-size: 40rpx;
				}
			}
		}
		.button {
			width: 200rpx;
			height: 50rpx;
			margin-top: 30rpx;
			margin-right: 20rpx;
			background:url('@/static/images/presell.png');
			background-size: cover;
			display: flex;
			justify-content: space-around;
			&>text {
				color:#fff;
				line-height: 50rpx;
			}
			&>text:first-child {
				font-size: 16rpx;
			}
			&>text:last-child {
				font-size: 24rpx;
			}
		}
	}
}
</style>
